<template>
    <div class="main" id="main"></div>
</template>

<script>
import * as echarts from 'echarts'
import 'echarts-gl'
import { mapState } from 'vuex'
// import { request } from '@/utils/request'
// import controlsData from '@/mock/control'
let myChart
export default {
  data () {
    return {}
  },

  computed: {
    ...mapState(['selectedProjectId'])
  },

  watch: {
    async selectedProjectId () {
      const data = await this.getData()
      if (myChart) {
        const options = myChart.getOption()
        options.series[0].data = data
        myChart.setOption(options)
      } else {
        this.paintLine(data)
      }
    }
  },

  async mounted () {
    // this.paintLine()
    const data = await this.getData()
    this.paintLine(data)
  },

  methods: {
    //  获取轨迹导向数据
    async getData () {
      if (!this.selectedProjectId) {
        this.$message({
          type: 'warning',
          message: '请选择工程信息',
          showClose: true
        })
        return
      }
      const query = {
        projectId: this.selectedProjectId
      }

      const res = await this.$store.dispatch('getLeaderTrackData', query)
      if (!res.success) {
        this.$message({
          type: 'warning',
          message: '该项目未提供导向数据!',
          showClose: true
        })
        return []
      }

      return res.data.map(item => {
        let { MD, Elev, Right } = item
        MD = Number(MD)
        Elev = Number(Elev)
        Right = Number(Right)
        const distance = Number((Math.sin(Right / 180) * 9.7).toFixed(2))
        return [MD, distance, Elev]
      })
      // return controlsData.map(item => {
      //   const { MD, Elev, right } = item
      //   const distance = Math.sin(right / 180) * 9.7
      //   console.log(distance, Math.sin(right / 180))
      //   return [MD, distance, Elev]
      // })

    //   const res = await request('/summary/track', 'GET', query)
    //   console.log(res)
    },
    //  绘制实时导向轨迹
    paintLine (data = []) {
      const chartDom = document.getElementById('main')
      myChart = echarts.init(chartDom)

      const option = {
        tooltip: {},
        backgroundColor: '#fff',
        splitArea: {
          areaStyle: {
            color: ['rgba(250,250,250,0.3)', 'rgba(187,187,187,1)']
          }
        },
        visualMap: {
          show: false,
          dimension: 2,
          min: 0,
          max: 30,
          inRange: {
            color: [
              '#313695'
              // '#4575b4',
              // '#74add1',
              // '#abd9e9',
              // '#e0f3f8',
              // '#ffffbf',
              // '#fee090',
              // '#fdae61',
              // '#f46d43',
              // '#d73027',
              // '#a50026'
            ]
          }
        },
        xAxis3D: {
          type: 'value',
          name: 'X-累计钻杆长度(MD) m',
          min: 0
          // max: 800,
          // splitNumber: 80
        },
        yAxis3D: {
          type: 'value',
          name: 'Y-水平偏移量(Right) m',
          min: -1,
          max: 1
        },
        zAxis3D: {
          type: 'value',
          name: 'Z-高程(Elev) m',
          max: 40
        },
        grid3D: {
          boxWidth: 800,
          viewControl: {
            beta: 0,
            distance: 450,
            // orthographicSize: 200,
            // minOrthographicSize: 600,
            projection: 'perspective'
          }
        },
        series: [{
          type: 'line3D',
          name: '钻进导向数据',
          data: data,
          lineStyle: {
            width: 4
          }
        }]
      }

      option && myChart.setOption(option)
    }
  }
}
</script>

<style scoped>
#main{
    box-sizing: border-box;
    padding: 2rem 2rem;
    height: 100%;
}
</style>
